<template>
  <div>
    <FormDialogComponent
      ref="formtDialogRef"
      dialogWidth="1200px"
      v-model="form"
      :formInline="true"
      dialogTitle="移库"
      :autoTitle="false"
      :formHeader="formHeader"
      :formUrl="urls.API_URL_BACKSTAGE_WMS_WMSMATERIALINVENTORYDETAILRELOCATION"
      :showFormFoot="false"
      formAction="put"
      @beforeFormSubmit="beforeFormSubmit"
      @afterFormSubmitFailure="afterFormSubmitFailure"
    >
      <!--表单提交的自定义内容 -->
      <template #form_warehouseSeatIdOfOrign>
        <WmsWarehouseCascadeSelectComponent v-model:warehouseSeatId="form.warehouseSeat!.id" :disabled="true" />
      </template>
      <template #form_warehouseSeatId>
        <WmsWarehouseCascadeSelectComponent
          ref="wmsWarehouseCascadeSelectFormComponentRef"
          v-model:warehouseSeatId="form.warehouseSeatId"
          @change="formtDialogRef.fieldValidation('warehouseSeatId')"
        />
      </template>
      <template #form_inventoryDetails>
        <!--物料存储明细-->
        <MaterialInventoryDetailsForm v-model="form.materialInventory!.materialInventoryDetails" @select-seat="assignSeatValueToSeat" />
      </template>
    </FormDialogComponent>
  </div>
</template>

<script setup lang="ts">
import FormDialogComponent from '@/components/base/table/form/FormDialogComponent.vue';
import MaterialInventoryDetailsForm from '@/views/page/wms/materialinventorydetail/MaterialInventoryDetailsForm.vue';
import type { FormHeader, TableData } from '@/types/interface/base_interface';
import type { WmsMaterialInventoryDetail } from '@/types/interface/wms_interface';
import { nextTick, onMounted, ref } from 'vue';
import urls from '@/api/request/urls';
import Request from '@/api/request/request';

// 接收父容器参数
interface Props {
  action?: string; // 表单的处理类型，post表示提交，put表示编辑
}
const props = withDefaults(defineProps<Props>(), {
  action: 'put'
});

let inventoryDetailId: string | undefined;

//表单==========================================================
//表单对象
const form = ref<WmsMaterialInventoryDetail>({});
//表单元素类型
const formHeader = ref<FormHeader[]>([]);
onMounted(async () => {
  // 添加编辑表单
  formHeader.value = [
    {
      label: '物料信息',
      prop: 'seatDivider',
      type: 'divider'
    },
    {
      label: '物料名称',
      prop: 'materialName',
      placeholder: ' ',
      disabled: true
    },
    {
      label: '生产批次',
      prop: 'batchNumber',
      placeholder: ' ',
      disabled: true
    },
    {
      label: '生产厂家',
      prop: 'manuFacturer',
      placeholder: ' ',
      disabled: true
    },
    {
      label: '生产日期',
      prop: 'productionDate',
      placeholder: ' ',
      disabled: true
    },
    {
      label: '已入库数',
      prop: 'storedQuantity',
      placeholder: ' ',
      disabled: true
    },
    {
      label: '当前总库存',
      prop: 'totalInventory',
      placeholder: ' ',
      disabled: true
    },
    {
      label: '库存上限',
      prop: 'inventoryLimit',
      placeholder: ' ',
      disabled: true
    },
    {
      label: '库存下限',
      prop: 'inventoryLower',
      placeholder: ' ',
      disabled: true
    },
    {
      label: '物料详情',
      prop: 'inventoryDetails',
      type: 'customTemplate'
    },
    {
      label: '需要移出的物料库位信息',
      prop: 'seatDivider',
      type: 'divider'
    },
    {
      label: '源库位',
      prop: 'warehouseSeatIdOfOrign',
      type: 'custom'
    },
    {
      label: '物料数量',
      prop: 'inventory',
      disabled: true
    },
    {
      label: '备注',
      prop: 'remark',
      disabled: true
    },
    {
      label: '需要移入的物料库位信息',
      prop: 'seatDivider',
      type: 'divider'
    },
    {
      label: '目标库位',
      prop: 'warehouseSeatId',
      type: 'custom',
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '物料数量',
      prop: 'inventory2',
      rules: [
        {
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '备注',
      prop: 'remark2',
      rules: [
        {
          max: 255,
          message: '长度在不能超过255个字符',
          trigger: 'blur'
        }
      ]
    }
  ];
});
//===================================处理物料库存详情====================================================
//获取对应的物料库存集合
const getMaterialInventoryDetails = async (inventoryId: string) => {
  let materialInventoryDetails = null;
  const resData: any = await new Request(urls.API_URL_BACKSTAGE_WMS_WMSMATERIALINVENTORYDETAIL, null, {
    params: { 'materialInventory.id': inventoryId }
  }).get();
  if (resData.success) {
    materialInventoryDetails = resData.data.data;
  }
  return materialInventoryDetails;
};
//定义库位级联框
const wmsWarehouseCascadeSelectFormComponentRef = ref();
//在给seat赋值后，回调函数。在已有的库位的“选择”按钮后，直接给此次存入的库位赋值
const assignSeatValueToSeat = async (seatId: string) => {
  // formtDialogRef.value.clearFieldValidation('warehouseSeatId');
  wmsWarehouseCascadeSelectFormComponentRef.value.setWarehouseSeat(seatId);
  //手动赋值，目的是解决验证延迟问题。不然要在第二次赋值才会真正验证。
  form.value.warehouseSeatId = seatId;
  formtDialogRef.value.fieldValidation('warehouseSeatId');
};
//===================================对话框====================================================
const formtDialogRef = ref();
//加载物料详情信息
const loadMesCarTechnologyDetailData = async (id: string) => {
  const resData: any = await new Request(`${urls.API_URL_BACKSTAGE_WMS_WMSMATERIALINVENTORYDETAIL}/${id}`).get();
  if (resData.success) {
    form.value = resData.data;
    //添加关联属性，方便表单操作(不至于添加多个自定义列)
    if (form.value.materialBatch) {
      form.value.manuFacturer = form.value.materialBatch.manuFacturer;
      form.value.batchNumber = form.value.materialBatch.batchNumber;
      form.value.productionDate = form.value.materialBatch.productionDate;
      form.value.storedQuantity = form.value.materialBatch.storedQuantity;
      if (form.value.materialBatch.material) {
        form.value.materialName = form.value.materialBatch.material.name;
      }
      if (form.value.materialInventory) {
        //物料库存的上下限
        form.value.inventoryLimit = form.value.materialInventory.inventoryLimit;
        form.value.inventoryLower = form.value.materialInventory.inventoryLower;
        form.value.totalInventory = form.value.materialInventory.totalInventory;
        //给物料库存详情赋值一个空数组，用于绑定子组件
        form.value.materialInventory.materialInventoryDetails = await getMaterialInventoryDetails(form.value.materialInventory.id!);
      }
    }
  }
};
const openDialog = async (id: string) => {
  inventoryDetailId = id;
  //加载物料详情信息
  await loadMesCarTechnologyDetailData(id);
  //加载完数据再打开对话框
  await formtDialogRef.value.openDialog();
};
const closeDialog = () => {
  //清空表单
  form.value = {};
  formtDialogRef.value.closeDialog();
};
//在表单提交前要处理的事
const beforeFormSubmit = async () => {
  console.log(1);
};
//在表单提交失败后
const afterFormSubmitFailure = async () => {
  //因为表单信息大部分都是disabled的，因此在添加失败后要重新将原来获取加载数据。
  await loadMesCarTechnologyDetailData(inventoryDetailId!);
};
defineExpose({
  // 参考vue3官方文档，需要将函数暴露出去才能被父组件调用，setup模式是不暴露的
  openDialog,
  closeDialog
});
</script>

<style scoped></style>
